<template>
  <div class="categoryheader">
      <div class="top">
          <h3>分类</h3>
          <span class="iconfont search">&#xe627;</span>
      </div>
      <div class="tab">
            <ul>
                <li v-for="(item,index) in navList" :key="index" :class="{active:index ==num}" @click="tab(index)">
                    {{item}}
                </li>
            </ul>
       </div>
        <!-- <div class="tabCon">
            <div v-for="(itemCon,index) in tabContents" :key="index" v-show="index == num">
                {{itemCon}}{{index}}
            </div>
        </div> -->
      
  </div>
</template>

<script>
export default {
  name: 'CategoryHeader',
  data () {
    return {
        navList:['分类','品牌','最热'],
        tabContents:['分类','品牌','最热'],
        num:0
    }
  },
  components:{
    
  },
  methods:{
      tab (index){
          this.num = index
      }
  }
}
</script>


<style lang="stylus" scoped>
.categoryheader
    width 100%
    background-color #fff
    .top
        width 100%
        border-bottom 1px solid #efefef
        h3  
            font-size .36rem
            text-align center
            padding .2rem
            font-weight bold
        span 
            float right
            font-size .44rem
            margin -.6rem .2rem
            font-weight bold
    .tab
        width 100%
        border-bottom 1px solid #efefef
        font-size .32rem
        text-align center
        ul li
            list-style none
            display inline-block
            height 1rem
            line-height 1rem
            width 1rem
            text-align center
            position relative
        .active
            font-weight bold
            color #000 
            &:after 
              content ''
              position absolute
              bottom .2rem
              top auto
              left 20%
              height 3px
              width .6rem
              background-color #000
             
</style>
